import React from 'react'

interface SettingItemProps {
  label: string
  description?: string
  children: React.ReactNode
  className?: string
}

/**
 * 设置项组件
 * 提供统一的设置项布局和样式
 */
export const SettingItem: React.FC<SettingItemProps> = ({
  label,
  description,
  children,
  className = ''
}) => {
  return (
    <div className={`setting-item ${className}`} style={{
      display: 'flex',
      flexDirection: 'column',
      gap: '8px',
    }}>
      {/* 标签和描述 */}
      <div style={{
        display: 'flex',
        flexDirection: 'column',
        gap: '2px',
      }}>
        <label style={{
          fontSize: '14px',
          fontWeight: '600',
          color: '#333',
          display: 'flex',
          alignItems: 'center',
          gap: '4px',
        }}>
          {label}
        </label>
        
        {description && (
          <p style={{
            fontSize: '12px',
            color: '#666',
            margin: 0,
            lineHeight: '1.4',
          }}>
            {description}
          </p>
        )}
      </div>
      
      {/* 设置控件 */}
      <div style={{
        display: 'flex',
        flexDirection: 'column',
        gap: '6px',
      }}>
        {children}
      </div>
    </div>
  )
}

export default SettingItem
